<div class="tlp-framed-vertically">

    {{> siteadmin-config/site-admin-navbar }}

    <div id="siteadmin-config" class="tlp-framed-horizontally">
        <section class="tlp-pane">
            <div class="tlp-pane-container">
                <div class="tlp-pane-header">
                    <h1 class="tlp-pane-title"><i class="fa fa-list tlp-pane-title-icon"></i> {{ available_natures }}</h1>
                </div>
                <section class="tlp-pane-section">
                    <p>{{ desc }}</p>

                    {{> siteadmin-config/natures-modal-create }}

                    <div class="tlp-table-actions">
                        <button id="siteadmin-config-natures-modal-create-button" class="tlp-button-primary">
                            <i class="fa fa-plus tlp-button-icon"></i> {{ create_new_nature }}
                        </button>
                    </div>
                    <table class="tlp-table tracker-natures-table">
                        <thead>
                            <tr>
                                <th>{{ shortname_label }}</th>
                                <th>{{ forward_label_label }}</th>
                                <th>{{ reverse_label_label }}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {{^ has_natures }}
                            <tr>
                                <td colspan="4" class="tlp-table-cell-empty">
                                    {{ no_nature }}
                                </td>
                            </tr>
                            {{/ has_natures }}
                            {{# natures_usage }}
                                {{# nature }}
                                <tr>
                                    <td>{{ shortname }}</td>
                                    <td>{{ forward_label }}</td>
                                    <td>{{ reverse_label }}</td>
                                    <td class="tlp-table-cell-actions">
                                        {{# is_system }}
                                            <button class="tlp-table-cell-actions-button tlp-button-primary tlp-button-outline tlp-button-small tlp-tooltip tlp-tooltip-left"
                                                data-tlp-tooltip="{{ edit_system_nature_title }}"
                                                disabled
                                            >
                                                <i class="fa fa-pencil tlp-button-icon"></i> {{ edit_icon_label }}
                                            </button>
                                        {{/ is_system }}
                                        {{^ is_system }}
                                            <button class="tlp-table-cell-actions-button tlp-button-primary tlp-button-outline tlp-button-small siteadmin-config-natures-modal-edit-button"
                                                data-edit-modal-id="siteadmin-config-natures-modal-edit-{{ shortname }}"
                                            >
                                                <i class="fa fa-pencil tlp-button-icon"></i> {{ edit_icon_label }}
                                            </button>
                                        {{/ is_system }}

                                        {{^ can_be_deleted }}
                                            <button class="tlp-table-cell-actions-button tlp-button-danger tlp-button-outline tlp-button-small tlp-tooltip tlp-tooltip-left"
                                                data-tlp-tooltip="{{ cannot_delete_title }}"
                                                disabled
                                            >
                                                <i class="fa fa-trash-o tlp-button-icon"></i> {{ delete_icon_label }}
                                            </button>
                                        {{/ can_be_deleted }}
                                        {{# can_be_deleted }}
                                            <button type="submit"
                                                class="tlp-table-cell-actions-button tlp-button-danger tlp-button-outline tlp-button-small siteadmin-config-natures-modal-delete-button"
                                                data-delete-modal-id="siteadmin-config-natures-modal-delete-{{ shortname }}"
                                            >
                                                <i class="fa fa-trash-o tlp-button-icon"></i> {{ delete_icon_label }}
                                            </button>
                                        {{/ can_be_deleted }}

                                        {{^ is_system }}
                                            {{> siteadmin-config/natures-modal-edit }}
                                        {{/ is_system }}
                                        {{^ is_or_has_been_used }}
                                            {{> siteadmin-config/natures-modal-delete }}
                                        {{/ is_or_has_been_used }}
                                    </td>
                                </tr>
                                {{/ nature }}
                            {{/ natures_usage }}
                        </tbody>
                    </table>
                </section>
            </div>
        </section>
    </div>
</div>
